---
import '../styles/tailwind.css'
import '../assets/scss/index.scss'
import SiteMeta from '@components/SiteMeta.astro'
import Header from '@components/Header.astro'
import Footer from '@components/Footer.astro'
import { ClientRouter } from 'astro:transitions'

const {
  title = 'Accessible Astro',
  description = 'A starter project with accessibility features using Astro static site builder. Contains accessible landmarks, skip links, a dark mode color scheme, better focus outline and keyboard menu navigation.',
  url = Astro.site,
  image = 'social-preview-image.png',
  author = 'Incluud',
} = Astro.props
---

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <!-- favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

    <SiteMeta title={title} description={description.substring(0, 100)} url={url} image={image} author={author} />

    <!-- Enable Astro View Transitions for all browsers -->
    <ClientRouter />
  </head>
  <body>
    <Header />
    <main id="main-content" transition:animate="fade">
      <slot />
    </main>
    <Footer />
    <style lang="scss" is:global>
      @use '../assets/scss/base/mixins' as *;

      // sticky footer on low content pages
      html,
      body {
        height: 100%;
      }

      body {
        display: flex;
        flex-direction: column;
        overflow-x: clip;

        main {
          flex: 1 0 auto;
        }

        footer {
          flex-shrink: 0;
        }
      }

      pre {
        border: 2px solid var(--link-color);
        border-radius: 0.35rem;
        padding: 1rem;
      }

      .card {
        a {
          @include text-decoration(transparent, var(--foreground-color), 4px, 2px);
        }
      }
    </style>
  </body>
</html>
